
<script  setup lang="ts">
import { reactive, ref, defineComponent,onMounted ,onBeforeUnmount} from "vue";
import { useRouter } from "vue-router";
import { get,post } from "../../axios/api";
import type { FormInstance, FormRules } from "element-plus";
import useCurrentInstance from "@/hooks/useCurrentInstance";
const { proxy } = useCurrentInstance();

const loading = ref(false);
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
 const innerWidth = ref(window.innerWidth);
const ruleForm = reactive({
  username: "",
  password: "",
});

const handleResize = () => {
      innerWidth.value = window.innerWidth;
      // 在这里可以根据窗口宽度执行不同的逻辑
      if (innerWidth.value < 750) {
       // 在手机登录时执行的操作
       
         document.querySelector(".fromlist").style.setProperty("width", "350px");
          console.log('手机登录');
         document.querySelector(".fromlist").style.setProperty("margin", "auto");
      
      } else {
        // 在电脑登录时执行的操作
        console.log('电脑登录');
         document.querySelector(".fromlist").style.setProperty("width", "20%");
            document.querySelector(".fromlist").style.setProperty("margin-right", "15%");
        
      }
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
      handleResize()
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
    });

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入用户名"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: validatePass, trigger: "blur" }],
  password: [{ validator: validatePass2, trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;

        //请求接口
         const data = await post("/login",ruleForm);
          if(data.status_code == 200){
            let list = data.data
             localStorage.setItem("isAuthenticated", "true"); // 将用户认证状态保存在本地存储中
             for (const key in list) {
              if(key != 'expires_in'){
                localStorage.setItem(key,list[key])
              }
             }
             //获取权限
               proxy.$PublicAPI.getUserAuthority(list.user_id).then(res=>{
                  //获取默认第一菜单的一个页面的路径进行跳转
                   proxy.$PublicAPI.getOnePagePath()
               })
              
          }
      } catch (error) {
        console.error("发生错误:", error);
      }
      loading.value = false;
    } else {
      return false;
    }
  });
};



const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<template>
  <div class="box">
    <div class="fromlist">
      <div class="centered-text">欢迎登录系统</div>

      <el-form
        ref="ruleFormRef"
        label-position="top"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名:" prop="userName" class="input-wrapper">
          <div class="input-container">
            <el-input
              v-model="ruleForm.username"
              autocomplete="off"
              class="input-field"
              placeholder="请输入用户名"
            />
          </div>
        </el-form-item>

        <el-form-item label="密 码:" prop="password" class="input-wrapper">
          <div class="input-container">
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="off"
              class="input-field"
              placeholder="请输入密码"
              @keyup.enter="submitForm(ruleFormRef)"
            />
          </div>
        </el-form-item>
      </el-form>
      <el-button
        class="Submit"
        type="primary"
        :loading
        @click="submitForm(ruleFormRef)"
        >登录</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="less">
.box {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/Img/login.png);
  background-size: 100% 100%; /* 将背景图片大小设置为父元素宽度和高度的百分比 */
  // background: #ecf0f3;
  display: flex;
  align-items: center;
  justify-content: end;
  .fromlist {
    margin-right: 15%;
    width: 20%;
    height: 40%;
    background: #fcfdfd;
    border-radius: 20px;
    overflow: hidden;

    // .el-form-item__label
    .centered-text {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      height: 100px; /* 设置容器高度 */
      font-size: 35px;
      font-weight: 700;
    }
    .input-wrapper {
      display: flex;
      .input-container {
        flex: 1;
        .input-field {
          width: 100%;
          font-size: 16px;
          height: 40px; /* 设置输入框的高度 */
          line-height: 36px; /* 垂直居中对齐 */
        }
      }
    }

    .sbImg {
      width: 100%;
      height: 30%;
      background: forestgreen;
    }
    ::v-deep(.demo-ruleForm) {
      padding-top: 20px;
      width: 90%;
      height: 40%;
      margin: auto;
    }
    ::v-deep(.Submit) {
      // margin-top: 20px;
      margin-left: 5%;
      width: 90%;
      height: 45px;
    }
    .el-form-item {
      // font-size: 16px !important;
      margin-bottom: 20px;
    }
  }
  ::v-deep .el-form-item__label {
    width: 70px;
    line-height: 30px !important;
    font-size: 16px !important;
  }
}
</style>
